Vue.component("my-header",{
    template:`
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Knowledge Forum</a>
                <nav class="nav" id="nav">
                    <ul v-for="(c,i) in classify" style="float: left">
                        <li><a :href="'problem.html?module=' + classify[i].id">{{c.module}}</a></li>
                    </ul>
                </nav>
                <a href="personal.html" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
    `,
    data(){
        return{
            classify:[]
        }
    },
    created(){
        axios.get("QueryClassify.s").then(res=>{
            this.classify=res.data;
            console.info(this.classify);
        })
    }
})

Vue.component("my-section",{
    template:`
        <div class="inner">
            <article class="article-list bloglist" id="LAY_bloglist" v-for="(p,i) in problem " >
               <section class="article-item zoomIn article">
                    <h5 class="title">
                    <a :href="'readProblem.html?problemId='+ p.id">{{p.title}}</a>
                    </h5>
                    <div class="time">
                        <span class="day">{{day[i]}}</span>
                        <span class="month fs-18">{{month[i]}}<span class="fs-14">月</span></span>
                        <span class="year fs-18 ml10">{{year[i]}}</span>
                    </div>
                        <div class="content">
                        <a :href="'readProblem.html?problemId='+ p.id">
                            {{newbody[i].text}}
                        </a>
                    </div>
                    <div class="read-more">
                        <a :href="'readProblem.html?problemId='+ p.id" class="fc-black f-fwb">点击阅读</a>
                    </div>
                    <aside class="f-oh ">
                    <div class="f-fl tags">
                        <span class="fa fa-tags fs-16" ></span>
                    </div>
                    </aside>
               </section>
            </article>
                <el-pagination background
            layout="prev, pager, next"
            :total="total"
             @current-change="query"
            :page-size="7">
    </el-pagination>
        </div>
    `,
    data(){
        return{
            problem:[],
            day:[],
            month:[],
            year:[],
            total:0,
            module:'',
            searchtxt:'',
            newbody:[]
        }
    },
    created(){
        this.Initialize();
        this.query();
        console.log("problem=",this.problem)
    },
    methods:{
        Initialize(){
            console.log("init Initialize------------yangfan")
            var url=window.location.href;
            //判断是否有该参数
            var regPos = /module=\d+/;
            //取出module参数
            if(regPos.test(url)){
                this.module=url.match(regPos);
                console.info(this.module);
            }
            var regPos1 = /search=.*/;
            //取出search参数
            if (regPos1.test(url)) {
                this.searchtxt = url.match(regPos1);
                console.info(this.searchtxt);
            }
        },
        query(page){
            console.log("init query------------yangfan")
            page=page || 1;
            module=this.module || "module=1";
            let url="ClassifyQueryProblem.s?";
            url+=module;
            url+="&size=7&page="+page;
            if(this.searchtxt!=""){
                url+="&"+this.searchtxt;
            }
            console.info(url);
            axios.get(url).then(res=>{
                this.problem=res.data.list;
                this.total=res.data.total;
                this.newbody=res.data.newbody;
                //帖子数量
                let len=this.problem.length;
                let tday=new Array(len);
                let tmonth=new Array(len);
                let tyear=new Array(len);
                for (let i = 0; i < len; i++) {
                    tyear[i]=this.problem[i].begintime.substring(0,4);
                    tmonth[i]=this.problem[i].begintime.substring(5,7);
                    tday[i]=this.problem[i].begintime.substring(8,10);
                }
                this.day=tday;
                this.month=tmonth;
                this.year=tyear;
            })
        },
    }
})

Vue.component("my-hotproblem",{
    template:`
            <div class="other-item" id="categoryandsearch">
             <div class="search">
             <label class="search-wrap">
                 <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
                 <span class="search-icon">
                     <i class="fa fa-search" @click="search"></i>
                 </span>
             </label>
             <ul class="search-result"></ul>
         </div>
         <ul class="category mt20" id="category" >
             <li data-index="0" class="slider"></li>
             <li data-index="1"><a><b>热门问题</b></a></li>
                <!--      改链接       -->
             <li data-index="i"   v-for="(p,i) in problem"><a :href="'readProblem.html?problemId='+ p.id">{{p.title}}</a></li>
         </ul>
     </div>
    `,
    data(){
        return{
            problem:[],
            searchtxt:''
        }
    },
    created(){
        this.query();
    },
    methods:{
        query(){
            let url="HotProblem.s";
            console.info(url);
            axios.get(url).then(res=>{
                this.problem=res.data;
            })
        },
        search(){
            var stxt =document.getElementById("searchtxt").value;
            this.searchtxt=stxt;
            console.info("search:"+this.searchtxt);
            this.searchtxt.replaceAll(" ","");
            console.info(this.searchtxt);
            if( this.searchtxt!=''){
                window.location.href='problem.html?search='+this.searchtxt;
            }else{
                alert('搜索内容为空');
            }
        }
    }
})